<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>axios基本使用</title>
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.8/axios.min.js"></script>
</head>
<body>
	<div class="container">
		<h2 class="page-header">基本使用</h2>
		<button class="btn btn-primary"> 发送GET请求 </button>
		<button class="btn btn-warning"> 发送POST请求 </button>
		<button class="btn btn-success"> 发送PUT请求 </button>
		<button class="btn btn-danger"> 发送DELETE请求 </button>
	</div>
	<script>
		// 获取按钮
		const btns = document.querySelectorAll('button');

		// 获取一篇文章
		btns[0].onclick = function() {
			//发送 AJAX 请求
			axios({
				// 请求类型
				method:'GET',
				// URL
				url:'http://localhost:3000/posts/2'
			}).then(res=>{
				console.log(res);
			})
		}
		// 添加一篇新的文章
		btns[1].onclick = function() {
			//发送 AJAX 请求
			axios({
				// 请求类型
				method:'POST',
				// URL
				url:'http://localhost:3000/posts',
				data:{
					id:"3",
					title:'今天天气真好',
					views:100
				}
			}).then(res=>{
				console.log(res);
			})
		}
		//更新数据
		btns[2].onclick = function() {
			//发送 AJAX 请求
			axios({
				// 请求类型
				method:'PUT',
				// URL
				url:'http://localhost:3000/posts/3',
				data:{
					title:'今天天气真好',
					views:150
				}
			}).then(res=>{
				console.log(res);
			})
		}
		// 删除数据
		btns[3].onclick = function() {
			//发送 AJAX 请求
			axios({
				// 请求类型
				method:'DELETE',
				// URL
				url:'http://localhost:3000/posts/3',
			}).then(res=>{
				console.log(res);
			})
		}
	</script>
</body>
</html>